La hoja de estilos es el corazón del blog, y desde ahí podemos cambiar completamente su aspecto, además de eso también podemos crear efectos y galerías como la que proporciona Stu Nicholls en CSSplay.
Instalamos la galería.En plantilla edición de HTML justo antes de </head> añadimos el contenido de este archivo que son los estilos.
Guardamos los cambios y en una entrada o gadget de html sobre las entradas añadimos el contenido de este otro archivo que es donde añadiremos las imágenes. Como muestra el archivo ya contiene la primera imagen de cada bloque, pero veamos como añadirlas.
La galería tiene cinco pestañas superiores, en el archivo cada una lleva un nombre.
Portraits - Landscapes - Flowers - Trees - Birds
El primer bloque comienza con:
<a class="set" href="#Portraits">Portraits<!--[if gte IE 7]><!--></a>
Portraits lo sustituimos por el nombre de nuestra primera pestaña, donde #Portraits podemos añadir el mismo nombre de la pestaña.
Lo siguiente sería la primera imagen que añadimos en el bloque de Portraits y como decía ya viene incluida.
<li><a href="lbox/portrait1.jpg"><img src="http://www.cssplay.co.uk/menu/lbox/portrait1a.jpg" alt="" title="" /></a></li>
Sustituimos la url que nos proporciona el archivo por la nuestra
http://www.cssplay.co.uk/menu/lbox/portrait1a.jpg = a nuestra imagen
Las imágenes las podemos añadir de cualquier tamaño, pero hay que tener en cuenta que si no es necesario una imagen grande lo que hacemos es cargar el blog y que la imagen pierda calidad.
Donde lbox/portrait1.jpg podemos añadir la imagen de gran tamaño, cuando en la galería pulsemos sobre la imagen ampliada nos llevará a esa imagen en caso de añadirla.
Si no añadimos esa imagen grande lo podemos dejar sin modificar porque la miniatura se ampliará de igual forma al tamaño establecido en los estilos width:200px (ancho) height:150px (alto)
Las siguientes imágenes se añaden de igual forma:
<li><a href="lbox/portrait2.jpg"><img src="lbox/portrait2a.jpg" alt="" title="" /></a></li>
Sustituir la url lbox/portrait2.jpg por la url de una imagen mayor si deseamos que al pulsar sobre la miniatura ampliada enlace con la imagen de gran tamaño.
Donde lbox/portrait2a.jpg añadimos la url de la miniatura.Con title="" podemos añadir el título de la imagen title="aquí el título" para que aparezca al pasar el cursor.
Una vez añadimos todas las imágenes al primer bloque de la galería nos encontramos con el bloque de la segunda pestaña que permanece fija. Esas imágenes siempre estarán a la vista.
<li class="active"><a class="set" href="#Landscapes">Landscapes<!--[if gte IE 7]><!--></a><!--<![endif]-->Sustituimos Landscapes por el nombre de nuestra pestaña y añadimos las imágenes de igual forma que en la pestaña Portraits.
Luego hacemos lo propio con el tercer bloque de imágenes.
<a class="set" href="#Flowers">Flowers<!--[if gte IE 7]><!--></a>
<li><a href="#flower1"><img src="http://www.cssplay.co.uk/menu/lbox/flower1.jpg" alt="" title="" /></a>
Más enlaces....
Con el cuarto.
<a class="set" href="#Trees">Trees<!--[if gte IE 7]><!--></a>
<li><a href="#tree1"><img src="http://www.cssplay.co.uk/menu/lbox/tree1.jpg" alt="" title="" /></a>
Más enlaces....
Y el quinto.
<a class="set" href="#Birds">Birds<!--[if gte IE 7]><!--></a>
<li><a href="#bird1"><img src="http://www.cssplay.co.uk/menu/lbox/bird1.jpg" alt="" title="" /></a>
Más enlaces....
Ver galería funcionando con los estilos modificados.
Para añadir esta galería al blog su autor pide un enlace a su página reconociendo así su autoría. El enlace no necesariamente debe ponerse en la misma entrada que añadimos la galería puede ser también en la sidebar y conservar también los créditos que llevan los estilos.
Si por el contrario vamos a darle uso comercial o como un trabajo remunerado para un cliente es mejor mandar un correo pidiendo permiso.
Primero agradecer: ha quedado de maravillas, solo cambiaré los colores...a vos and jermano Jmiur tanti graci!!! :D
Segundo -vengo enumerando y no se el por qué :O -
es una maravilla de los blogs esa galería.
Besos preciosa!!!
"Guardamos los cambios y en una entrada o gadget de html sobre las entradas añadimos el contenido de este otro archivo que es donde añadiremos las imágenes..."
Lamentablemente cuando hago clic en "archivo" la página web correspondiente no baja.
Sencillo y elegante, socia.
Hola Gem@.
Esto queda bellísimo. Por desfortuno, cuando hacemos click en la imagen de la galería no sube, dice que la página no ha sido encontrada. De todo lo demás es espectacular :D.
:: Graciela me alegra que ya esté resuelto, siento si no fue antes pero no hay mal que por bien no venga solucionaste dos cosas :)
:: Solucionado Enrique ha sido un error de enlace y de quien añade el enlace :S
:: Oloman buenos días paisano, gracias por comentar :)
:: Me alegra que te guste Deybi, ya está solucionado :)
:: Gracias Noa no había visto tu comentario ¡Felicidades!
Excelentisimo. Estamos bien, gracias. Todo ha sido solo un susto, por ahora. El problema en Haiti es grave. Hay mucha destrucción.
:: Me alegra que así sea Deybi, lo de Haití es dramático continuamente estoy pensando en ello.
Con la ayuda de estos trucos blogger vamos supliendo cada necesidad (o locura) que se nos venga a la mente.
OMG que buena galeria, siempre es un problema el espacio, que falta que sobra, que donde las agrupo, que donde las pongo y asi, pero con un añadido aparte no hay drama...
Ademas queda todo en orden y agrupadas como uno desee. Que genial aporte, muchas Gracias Gema :)
:: Gracias por comentar Henry :)
:: Me alegra que te guste Coke :)
:: Hola Noa, en realidad mi idea no era participar sino felicitarte pero si son las dos cosas mucho mejor :)
hola Que tal? con mucho frio por alla?
He estado atenta a las notis y veo como van de mal en peor con lo de la ola polar... pero animo que tal como dices tu no hay mal que por bien no venga.
Bueno ahora a lo nuestro, quiero esta galeria, pero decidi tomar primero tu opinion, servirá para mi blog? la encuentro ideal pero dime tu, pero considera que no me manejo muy bien en codigo HTML o CSS pero le di una miradita y no lo encontre muy dificil. solo queda una duda inicial (x q se q tendre mas) mi blog es por asi decirlo comercial cierto... entoncces le debo pedir autorizacion al creador, que opinas, besos y como siempre gracias
:: Hola Giovanna tiempo sin verte, eso es bueno quiere decir que hay mucho trabajo :)
Este invierno tenemos de todo frío, lluvia, viento y nieve pero por suerte por esta zona Cartagena no podemos quejarnos.
La galería para añadirla tal y como viene en el archivo es sencilla de añadir pero debes tener en cuenta el lugar donde deseas añadir la galería, la medida que tienes disponibles y el uso que deseas darle.
Ten en cuenta también que los colores que viene en el archivo son los que el autor proporciona en su página, es muy entretenido personalizar esa galería, me ha llevado una tarde entera la del ejemplo :S
Otro punto que debes tener en cuenta es la forma que deseas mostrar las imágenes ¿grandes? ¿pequeñas? si las quieres mostrar grandes necesitas la url de la imagen grande y la de la miniatura.
Sobre consultar al autor para darle uso comercial eso es lo que dice en sus condiciones.
He entrado a toda prisa en tu blog y al ver de qué trataba el tema hoy... me he parado, porque "eso" había que leerlo despacio. Me he guardado tu artículo porque esa especie de tabla tengo que probarla yo... se ve fantástica.
Gracias por no quedártela para tí sola (nunca lo haces).
Un abrazo.
Hola Gem@ por que sera que no siempre puedo entrar a tu Blog, incluso en Google en los resultados donde aparece tu blog, solo se puede entrar viendo el caché.
Saludos
Maravilha Gem@! Obrigada :)
:: Gracias a ti por comentar Chesana :)
:: Hola GuillermoVM, al parecer los usuarios de Linux no pueden acceder porque Linux no reconoce el guión de mi url. No se si será tu caso :S
:: MamaNunes me alegra que te guste ¡Gracias!
Ok gracias por tus observaciones me pondre este fin de semana a montarla, claro esta que mi duda va ahora si le debo o no consultar al autor para uso en mi blog?
Cariños y me alegro que esto del frio no te este afectando tanto
Besos y abrazos a la distancia... ah por cierto lo del cafe me encanta... ahi veremos para cuando jajaja
Ostras!!!!!!!!!!!!!!!!!!
:: Suerte Giovanna :)
:: rlfox ¡ni lo intentes! la tuya es muy bonita y las imágenes quedan lindas en ventana modal.
Es una preciosidad !!!!!!!!!!!! me encanta!!!!
:: Déjate de encantos y mándame eso que me pensabas mandar o te pego una bronca como la del otro día |O
Hola Gema,
Sigo tu blog desde hace tiempo y he usado varias cosas de las que tu has posteado aqui, pero ahora hay esta galeria se me resiste. Necesito ayuda por favor. los botones de los temas se me ven escalonados hacia abajo al igual que pasa con la primera fila de fotos y estoy desesperado.
Gracias de antemano y enhorabuena.
Un saludo
Perdon que se me ha olvidado, el problema me lo da con firefox, con internet explorer va bien. Estoy usando un blog para probar por si quieres ver como queda, es:
http:\\pruebasrescate.blogspot.com
Hola querida tanto tiempo, q tal como has estado,
Aca ya de vacaciones al fin... bueno preparando las cosas para la universidad y el año escolar de mis hijas, ya de tanto en tanto termine mi galeria de fotos, espero que te guste ya que tiene fotos actuales, la personalice con mis colores y todo, ahora, tengo la pregunta del millon. deseo dejarla posicionada en el boton Galeria de Fotos de mi menu (en la cabecera) entonces mi pregunta es como hago esto con una entrada y enlazo el boton con la entrada (si es esta la forma no recuerdo cual direccion va en http://) ahora si es con un Gadjet html (lo probe y queda como flotando sobre las entradas ya publicadas tapando el fondo de su contenido)... espero me orientes ya me confundi
Besos Ah por cierto muy buenas tus ultimas publicaciones son de gran ayuda...ya me entusiasme con otra cosa que vi por aqui...pero ya me conoces no le doy muchos cambios al blog por que ya luego hago algo mal
querida enlace el titulo de la entrada con el boton galeria de fotos en gadjet del menu pero al clicar sobre este me aparece el texto "No se encuentra la pagina" te dejo como lo estoy enlasando (en div class del menu)en el href la direccion de mi blog y su enlace grandessaborescategorias.blogspot.com/2010/02/galeria-de-fotos.html" Galeria de Fotos (no pude publicar los simbolos)
Besos
:: Saludos amiga, me alegra saber de ti y que las cosas estén bien :)
Sobre la forma de enlazar la galería el código de tu menú es el siguiente:
<div id="menu"><div class="colormenu">
<a class="menu" href="http://grandessaboresbanqueteria.blogspot.com/search/label/Home">Home</a>
<a class="menu" href="http://grandessaboresbanqueteria.blogspot.com/2009/04/produccion-de-eventos.html">Nosotros</a>
<a class="menu" href="<b>http://grandessaboresbanqueteria.blogspot.com/search/label/Galeria%20de%20Fotos</b>">Galeria de Fotos</a>
<a class="menu" href="mailto:grandessabores.banqueteria@gmail.com">Contactenos</a>
</div>
El enlace que está en negrita es la entrada que enlaza con el botón, está bien porque enlaza la url de la barra del navegador al visualizar la entrada completa.
Lo que veo extraño es que la entrada se corta y la galería queda encima de la entrada, no sé que problema puede ser porque las entradas no tienen límite de altura, también veo que las pestañas de la galería quedan ocultas detrás del panel.
Todo eso puede pasar porque cuando en una entrada cambiamos de la pestaña html a Redactar se distorsionan los códigos.
Por qué no pruebas en un blog de pruebas y cuando lo tengas listo entonces lo añades al blog principal?
:: No salió lo marcado en negrita veamos ahora:
<div id="menu"><div class="colormenu">
<a class="menu" href="http://grandessaboresbanqueteria.blogspot.com/search/label/Home">Home</a>
<a class="menu" href="http://grandessaboresbanqueteria.blogspot.com/2009/04/produccion-de-eventos.html">Nosotros</a>
<a class="menu" href="http://grandessaboresbanqueteria.blogspot.com/search/label/Galeria%20de%20Fotos">Galeria de Fotos</a>
<a class="menu" href="mailto:grandessabores.banqueteria@gmail.com">Contactenos</a>
</div>
lo probe y resulto el enlace, ahora tienes razon con lo del tamaño y lo de la entrada eso tampoco lo entiendo, estoy en el de pruebas por que no pude configurar la galeria centrandola con la entrada (la copie tal cual) en la plantilla y en la entraga; tb probe con 1 gadjet
Borrare todo y empezare de nuevo desde 0
:: Rescatero cuando se añade la galería en una entrada y para ver como queda cambiamos de pestaña el código se distorsiona, no en esta galería en casi todo. Envíame un mail y en asunto pones Galería que sea quien eres ;)
Hola q tal, sorry por no responderte antes estuve bien ocupada con esto del dia de San Valentin q aca lo celebramos el 14 de feb. No tendria problemas de eliminar una pestaña si eso ayuda a la config. y estuve pensando bien donde ubicarla, la dejare en el menu en el boton galeria, estuve haciendo todo desde cero pero queda igual...
haber si
haber si me das una manito con esto;
Un abrazo amiga
:: Grandes Sabores Banqueteria es primordial que para el buen funcionamiento de la galería tenga espacio suficiente, si la galería es más ancha que el espacio lógicamente no saldrá bien, te lo digo porque el espacio de tu entradas es más bien reducido y la galería tiene de ancho width:635px.
Da igual desde qué botón la enlaces lo que importa es el sitio donde la añades.
Me alegra que tengas trabajo eso es bueno :D
Hola Gema, estoy probando este visor y me ocurre lo siguiente (creo que debe ser que no entiendo bien que quiere decir"..y en una entrada o gadget de html sobre las entradas añadimos...".
Pongo el codigo en una entrada nueva y antes de hacer nada me desaparece la entrada, no puedo guardar, no veo vista previa,me sale por debajo las fotos malas de arriba abajo pero sin verse solo cuadrito..
Otra cuestion Que quieres decir con " gadget de HTML sobre las entradas???
gracias
Hola Gema, no es aquí donde debería hacer esta pregunta pero me pregunto si me puedes echar una mano con mi blog de pruebas. Resulta que he añadido un slider y ahora las pestañas desplegables del menú se me esconden tras el slider, sabes cómo hacer para que esto no ocurra?Gracias!
Se me olvidaba, la página se llama: pruebastelesmash.blogspot.com
Saludos desde Colombia.... ¡EXCELENTE MATERIAL! gracias por compartirlo. Lástima que no pude hacer +1 en esta entrada, me aparece un error en el botón de Google+
:: Saludos Adrián Suárez, el botón tiene error es verdad, miraré si lo soluciono. Gracias!!
:: Priamo y telesmash veo estos comentarios ahora :S imagino que ya lo solucionaron.
Nota: solo los miembros de este blog pueden publicar comentarios.